<template>
  <div class="project-detail">
    <div class="project-detail-head">
      <div class="project-detail-head__title">蓝天产业园/宇航电源系统产业化建设项目-装测1、装测2、装测3工程</div>
    </div>

    <div class="project-detail-tabs">
      <el-tabs tab-position="left" class="screen-tabs">
        <el-tab-pane label="基本情况">
          <project-info />
        </el-tab-pane>
        <el-tab-pane label="五方主体">
          <project-org />
        </el-tab-pane>
        <el-tab-pane label="工程材料">
          <project-material />
        </el-tab-pane>
        <el-tab-pane label="视频监控">
          <project-video />
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import projectInfo from './project-info'
import projectOrg from './project-org'
import projectMaterial from './project-material'
import projectVideo from './project-video'

export default {
  name: 'project-detail',
  cnName: '项目详情',
  components: {
    projectInfo,
    projectOrg,
    projectMaterial,
    projectVideo
  },
  data() {
    return {}
  },
  methods: {},
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.project-detail {
  padding: 10px 20px;
  height: 100%;

  &-head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    &__title {
      font-weight: 650;
      font-size: 32px;
    }
  }

  &-tabs {
    height: calc(100% - 65px);
  }
}


.screen-tabs {
  height: 100%;

  ::v-deep {
    .el-tabs {
      &__item {
        height: 50px;
        line-height: 50px;
        color: #FFF;
        font-size: 20px;

        &.is-active {
          background: linear-gradient(180deg, #0056a8, #083b6b);
        }
      }
      &__nav-wrap {
        &:after {
          background-color: #1281A9;
        }
      }

      &--left {
        width: 4px;
      }
      &__content {
        height: 100%;
      }
    }

    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
